<template>
  <div>
    <el-drawer
        title="模板设置"
        size="40%"
        :visible.sync="drawer"
        :before-close="handleClose">
      <div class="mainContainer">
        <div class="info">
          <p style="font-size: 18px;font-weight: 500">基础信息</p>
          <div class="pics">
            <p>模板名称 <span>*</span>
              <el-input size="small" style="" placeholder="请输入模板名称" v-model="data.templateName"></el-input>
            </p>
          </div>
          <div class="pics">
            <div>描述
              <el-input type="textarea" style="width: 100%;margin-top: 8px" v-model="data.description"></el-input>
            </div>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <p style="font-size: 18px;font-weight: 500">巡查基本规则</p>
          <span style="font-weight: bold;margin-top: 10px;display: block">得分</span>
          <div class="pics" style="display:flex;justify-content: space-between">
            <p>考评总得分 <span>*</span>
              <el-radio v-model="defen" label="1" style="display: block;margin-top: 10px">不可修改</el-radio>
              <span style="margin-top: 10px;display: block;color: #999;font-size: 12px">
                考评提交时，总得分为平台自动计算得分，不支持修改
              </span>
            </p>
            <p>问题项扣分 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="不可修改"></el-option>
              </el-select>
              <span style="margin-top: 5px;display: block;color: #999;font-size: 12px">
                考评时，问题项得分不支持修改
              </span>
            </p>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <span style="font-weight: bold;margin-top: 10px;display: block">传图方式</span>
          <div class="pics" style="display:flex;justify-content: space-between">
            <p>在线考评传图规则 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="监控点抓图/图片上传"></el-option>
              </el-select>
            </p>
            <p>线下考评传图规则 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="拍照/本地相册上传"></el-option>
              </el-select>
            </p>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <span style="font-weight: bold;margin-top: 10px;display: block">结果项设置</span>
          <div class="pics" style="">
            <p>结果统计维度 <span>*</span></p>
            <div class="card1">
              <el-button size="small">合格</el-button>
              <el-button size="small">不合格</el-button>
              <img src="@/assets/img/rightTop.svg" alt="">
            </div>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <span style="font-weight: bold;margin-top: 10px;display: block">提交要求</span>
          <div class="pics" style="display:flex;justify-content: space-between">
            <p>是否要求完成所有考评项 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="不要求，未考评项默认【合格】"></el-option>
              </el-select>
            </p>
            <p>图片提交要求 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="不合格项必须传图"></el-option>
              </el-select>
            </p>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <span style="font-weight: bold;margin-top: 10px;display: block">线下考评规则</span>
          <div class="pics" style="display:flex;justify-content: space-between">
            <p>线下考评要求：是否签到 <span>*</span>
              <el-select v-model="data.sign" size="small" style="width: 320px">
                <el-option value="0" label="否"></el-option>
                <el-option value="1" label="是"></el-option>
              </el-select>
            </p>
          </div>
        </div>
        <div class="info" style="margin-top: 15px">
          <span style="font-weight: bold;margin-top: 10px;display: block">线上整改规则</span>
          <div class="pics" style="display:flex;justify-content: space-between">
            <p>整改抓图配置 <span>*</span>
              <el-select v-model="koufen" size="small" style="width: 320px" :disabled="disable">
                <el-option value="1" label="摄像机抓图"></el-option>
              </el-select>
            </p>
          </div>
        </div>

        <div style="margin-top: 50px;display: flex;justify-content: center">
          <el-button style="width: 100px;background-color:#303e9d !important;" type="primary" @click="comfirmTemplate" size="small">完成
          </el-button>
          <el-button style="width: 100px" @click="drawer=false" size="small">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "patrolSetting",
  data() {
    return {
      drawer: false,
      data: {},
      defen: "1",
      koufen: "1",
      qiandao: "2",
      disable: true,

    }
  },
  methods: {
    handleClose() {
      this.drawer = false
    },
    handleOpen(val) {
      this.drawer = true
      this.templateId = val
      this.$api.patrolGetModifyPatrolTemplateDto({templateId: val}).then(res => {
        res.sign=res.sign.toString()
        this.data = res
      })
    },
    comfirmTemplate(){
      const data=this.data
      this.$api.patrolUpdatePatrolTemplateInfo(data).then(res=>{
        if(res==1){
          this.$message.success("修改成功！")
          this.drawer=false
          this.$emit('addStatus', 1);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-drawer__body {
  background-color: #FAFAFA;
}

/deep/ .el-drawer__header {
  margin-bottom: 10px;
}

.mainContainer {
  padding: 10px 20px;
}

.el-button {
  background-color: #fff !important;
  border: 1px solid #eeeeee !important;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #303e9d;
}

/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #303e9d;
  background: #303e9d;
}

/deep/ .el-input.is-disabled .el-input__inner {
  color: #595959;
}

.card1 {
  width: 200px;
  margin-top: 10px;
  height: 80px;
  background-color: #fff;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  img {
    width: 35px;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.pics {
  margin-top: 15px;

  span {
    color: #ce0e0f;
  }

  p {
    width: 50%;

    .el-input {
      margin-top: 8px;
    }

    .el-select {
      margin-top: 8px;
      display: block;
    }


  }
}
</style>